<template>
  <div class="search" ref="search">
      <i class="el-icon-search"></i>
      <input type="text" placeholder="请输入名称查询" @focus="handleToFoucs" @blur="handleToBlur" v-model="searchText" maxlength="50" @keyup.enter="handleToEnter">
      <p>{{textNum}}/50</p>
  </div>
</template>

<script>
export default {
    name: 'search',
    data(){
        return {
            searchText: '',
            textNum: 0
        }
    },
    methods: {
        //聚焦
        handleToFoucs(){
            let search = this.$refs.search;
            search.style.borderColor = "#1890ff"
        },

        //失去焦点
        handleToBlur(){
            let search = this.$refs.search;
            search.style.borderColor = "#dcdfe6"
        },

        //向父组件传值
        handlerulg(){
            this.$emit('inputChange', this.searchText)
        },

        //回车
        handleToEnter(){
            this.$emit('handleToEnter')
        }
    },
    watch: {
        //更新文字数量
        searchText(newVal){
            this.textNum = newVal.length;
            this.handlerulg()
        }
    }
}
</script>

<style lang="scss" scoped>
.search{
    width: 200px;
    height: 38px;
    border: 1px solid #dcdfe6;
    display: flex;
    background: white;
    border-radius: 6px;
    input{
        border: none;
        outline: none;
        font-size: 14px;
        width: 120px;
        flex: 1;
        &::-webkit-input-placeholder{
            color:#c0c4cc;
        }
    }
    i{
        line-height: 38px;
        padding: 0 9px;
        font-size: 12px;
        color: #909399;
    }
    p{
        line-height: 38px;
        font-size: 9px;
        color: #909399;
        width: 40px;
        padding-right:9px;
        text-align: right;
    }
}
</style>